<template>
  <div style="padding: 20px; background: #001529; min-height: 100vh;">
    <h1 style="color: white; text-align: center;">地图调试页面</h1>
    
    <!-- 调试信息 -->
    <div style="background: #f0f0f0; padding: 15px; margin: 10px 0; border-radius: 5px;">
      <h3 style="margin: 0 0 10px 0;">调试信息：</h3>
      <div id="debugInfo" style="font-family: monospace; font-size: 12px;">
        正在加载调试信息...
      </div>
    </div>
    
    <!-- 地图容器 -->
    <div ref="mapContainer" style="width: 100%; height: 500px; border: 2px solid #ccc; margin: 20px 0;"></div>
    
    <!-- 控制按钮 -->
    <div style="margin: 20px 0;">
      <button @click="testEcharts" style="margin: 5px; padding: 10px;">测试ECharts</button>
      <button @click="testGeoJson" style="margin: 5px; padding: 10px;">测试GeoJSON</button>
      <button @click="loadMap" style="margin: 5px; padding: 10px;">加载地图</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const mapContainer = ref(null)
const debugInfo = ref('')

// 内联的徐州GeoJSON数据（最简版本）
const simpleXuzhouGeoJson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "name": "鼓楼区" },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[117.1, 34.3], [117.2, 34.3], [117.2, 34.25], [117.1, 34.25], [117.1, 34.3]]]
      }
    },
    {
      "type": "Feature", 
      "properties": { "name": "云龙区" },
      "geometry": {
        "type": "Polygon", 
        "coordinates": [[[117.2, 34.3], [117.3, 34.3], [117.3, 34.25], [117.2, 34.25], [117.2, 34.3]]]
      }
    }
  ]
}

const addDebug = (msg) => {
  const timestamp = new Date().toLocaleTimeString()
  debugInfo.value += `[${timestamp}] ${msg}\n`
  console.log(msg)
  const el = document.getElementById('debugInfo')
  if (el) el.innerHTML = debugInfo.value.replace(/\n/g, '<br>')
}

const testEcharts = () => {
  addDebug('=== 测试ECharts ===')
  addDebug(`ECharts版本: ${echarts.version}`)
  addDebug(`ECharts可用: ${typeof echarts !== 'undefined'}`)
  addDebug(`容器存在: ${!!mapContainer.value}`)
}

const testGeoJson = () => {
  addDebug('=== 测试GeoJSON ===')
  try {
    addDebug(`GeoJSON类型: ${simpleXuzhouGeoJson.type}`)
    addDebug(`Features数量: ${simpleXuzhouGeoJson.features.length}`)
    addDebug('GeoJSON数据有效')
  } catch (e) {
    addDebug(`GeoJSON错误: ${e.message}`)
  }
}

const loadMap = () => {
  addDebug('=== 开始加载地图 ===')
  
  if (!mapContainer.value) {
    addDebug('错误: 容器不存在')
    return
  }
  
  try {
    addDebug('创建ECharts实例...')
    const chart = echarts.init(mapContainer.value)
    
    addDebug('注册地图...')
    echarts.registerMap('xuzhou', simpleXuzhouGeoJson)
    
    const option = {
      title: {
        text: '徐州地图测试',
        left: 'center',
        textStyle: { color: '#fff' }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: 测试数据'
      },
      series: [{
        type: 'map',
        map: 'xuzhou',
        label: {
          show: true,
          color: '#fff'
        },
        data: [
          { name: '鼓楼区', value: 100 },
          { name: '云龙区', value: 80 }
        ],
        itemStyle: {
          areaColor: '#1a3a6b',
          borderColor: '#00ffff'
        }
      }]
    }
    
    addDebug('应用配置...')
    chart.setOption(option)
    addDebug('地图加载成功！')
    
  } catch (error) {
    addDebug(`地图加载失败: ${error.message}`)
    addDebug(`错误堆栈: ${error.stack}`)
  }
}

onMounted(() => {
  addDebug('调试页面已加载')
  addDebug('请按顺序点击测试按钮')
})
</script>